<select name="data[Producer][producer_id]" id="ProducerId">

</select>
<select name="data[Product][product_id]" id="ProductId">

</select>
<script type="text/javascript">
	var producers = $A();
	
	new Ajax.Request('/producers/index.json', {method: 'get', onSuccess: function(transport) {
		var notice = $('notice');
		var dropdown = $('ProducerId');
		producers = $A(eval(transport.responseText));
		var options = '';
		producers.each(function(producer) {
			if (producer.Member.business_name) {
				options = options + "\n" + '<option value="' + producer.Producer.producer_id + '">' + producer.Member.business_name + '</option>';
			}
		});
		dropdown.update(options);
		updateProductDropdown();
	}});
	
	function updateProductDropdown() {
		var dropdown = $('ProductId');
		var producer = producers.find(function(p) {
			return p.Producer.producer_id == $F('ProducerId');
		});
		var products = producer.Product;
		var options = '';
		products.each(function(product){
			if (product.product_name && !(Number(product.donotlist))) {
				options = options + "\n" + '<option value="' + product.product_id + '">' + product.product_name + ' ($' + Number(product.unit_price).toFixed(2) + ')</option>';
			}
		});
		dropdown.update(options);
	}
	
	$('ProducerId').observe('change', updateProductDropdown);
	
</script>